<template>
    <!-- 搜索筛选内组件 -->
    <div class="searchScreen" @click.stop="() => { }">
        <div class="searchScreen_one" v-if="type == 'all' || type == 'repertory'">
            <div class="searchScreen_one_title">库存状态</div>
            <div class="searchScreen_one_radio">
                <div class="searchScreen_one_radio_div" v-for="(item) in repertory" :key="item.id">
                    <div :class="{ searchScreen_one_radio_item: true, searchScreen_one_radio_item_active: item.id == shelvesStatus }"
                        @click.stop="repertoryClick(item)">
                        {{ item.label }}</div>
                </div>
            </div>
        </div>

        <div class="searchScreen_one" v-if="type == 'all' || type == 'merchants'">
            <div class="searchScreen_one_title">部门类型</div>
            <div class="searchScreen_one_radio">
                <div class="searchScreen_one_radio_div" v-for="(item) in recruiterTypeList" :key="item.deptId">
                    <div :class="{ searchScreen_one_radio_item: true, searchScreen_one_radio_item_active: item.deptId == recruiterType }"
                        @click.stop="recruiterTypeClick(item)">
                        {{ item.deptName }}</div>
                </div>
            </div>
        </div>

        <div class="searchScreen_one" v-if="type == 'all' || type == 'merchants'">
            <div class="searchScreen_one_title">部门名称</div>
            <div class="searchScreen_one_radio">
                <div class="searchScreen_one_radio_div" v-for="(item) in shelfList" :key="item.deptId">
                    <div :class="{ searchScreen_one_radio_item: true, searchScreen_one_radio_item_active: item.deptId == recruiterDeptId }"
                        @click.stop="shelfClick(item)">
                        {{ item.deptName }}</div>
                </div>
            </div>
        </div>

        <div class="searchScreen_one" v-if="type == 'all' || type == 'merchants'">
            <div class="searchScreen_one_title">人员名称</div>
            <div class="searchScreen_one_radio">
                <div class="searchScreen_one_radio_div" v-for="(item) in recruiterList" :key="item.userId">
                    <div :class="{ searchScreen_one_radio_item: true, searchScreen_one_radio_item_active: item.userId == recruiterUserId }"
                        @click.stop="recruiterClick(item)">
                        {{ item.nickName }}</div>
                </div>
            </div>
        </div>

        <div class="searchScreen_date" v-if="type == 'all' || type == 'warehousingDate'">
            <div class="searchScreen_date_title">入库时间</div>
            <div class="searchScreen_date_shelf">
                <div v-for="(item, index) in dataList" :key="index" class="searchScreen_date_shelf_div"
                    @click="datePicker">
                    <van-image :src="complement" class="menu_cions" />
                    <div class="title">{{ computPlace(item, index) }}</div>
                </div>
                <div class="separator">至</div>
            </div>
        </div>

        <div class="searchScreen_one" v-if="type == 'all' || type == 'isStock'">
            <div class="searchScreen_one_title">有无出库记录</div>
            <div class="searchScreen_one_radio">
                <div class="searchScreen_one_radio_div" v-for="(item) in isStockList" :key="item.id">
                    <div :class="{ searchScreen_one_radio_item: true, searchScreen_one_radio_item_active: item.id === outStockTag }"
                        @click.stop="stockClick(item)">
                        {{ item.label }}</div>
                </div>
            </div>
        </div>
        <van-loading v-if="loading" type="spinner" class="loading" />
        <van-calendar v-model:show="pickerShow" type="range" @confirm="onConfirm" :allow-same-day="true"
            :min-date="minDate" :max-date="maxDate" ref="calendarRef" />
    </div>
</template>
<script setup lang="ts">
import { ref, defineEmits, defineProps, defineExpose } from 'vue'
import { getUserList, queryList } from '@/api/productHome/index'
const complement = new URL("@/assets/productHome/icon_riqi.png", import.meta.url).href;
const props = defineProps({
    type: { default: 'all' },
    shelvesStatus: { default: '' },
    recruiterType: { default: '' },
    recruiterDeptId: { default: '' },
    recruiterUserId: { default: '' },
    inStartTime: { default: '' },
    inEndTime: { default: '' },
    outStockTag: { default: '' }
})
const emit = defineEmits(['update:shelvesStatus', 'update:shelvesStatusName', 'update:recruiterType', 'update:recruiterDeptId', 'update:recruiterDeptIdName', 'update:recruiterUserId', 'update:inStartTime', 'update:inEndTime', 'update:outStockTag'])

const loading = ref(false)
// 日期ref
const calendarRef = ref();
// 库存状态
const repertory = ref([{ label: '全部', id: '' }, { label: '已入库', id: '1' }, { label: '已上架', id: '2' }, { label: '已下架', id: '3' }, { label: '待下架', id: '4' }])
// 部门类型
const recruiterTypeList = ref<Array<any>>([])
// 部门名称
const shelfList = ref<Array<any>>([])
// 人员名称
const recruiterList = ref<Array<any>>([])
// 日期控件开关
const pickerShow = ref(false)
// 日期文字
const dataList = ref([
    '起始时间', '结束时间'
])
// 自定义日期范围
const minDate = new Date('2010/01/01')
const maxDate = new Date('2050/12/31')
// 有无出库记录
const isStockList = ref<Array<any>>([
    { label: '有出库记录', id: 1 },
    { label: '无出库记录', id: 0 },
])

/** 获取部门类型 */
const getType = async () => {
    loading.value = true
    const { data = [] } = await queryList({ parentId: '1861962988832542721' })
    recruiterTypeList.value = data
    loading.value = false
}
getType()
// 库存状态点击
const repertoryClick = (item: any) => {
    emit('update:shelvesStatus', item.id)
    emit('update:shelvesStatusName', item.label)
}

// 部门类型点击
const recruiterTypeClick = async(item: any) => {
    if (item.deptId == props.recruiterType) {
        emit('update:recruiterType', '')
        emit('update:recruiterDeptId', '')
        emit('update:recruiterDeptIdName', '')
        emit('update:recruiterUserId', '')
        shelfList.value = []
        recruiterList.value = []
    } else {
        emit('update:recruiterType', item.deptId)
        emit('update:recruiterDeptId', '')
        emit('update:recruiterDeptIdName', '')
        emit('update:recruiterUserId', '')
        emit('update:recruiterDeptIdName', item.deptName)
        loading.value = true
        const res = await queryList({ parentId: item.deptId })
        shelfList.value = res.data
        recruiterList.value = []
        loading.value = false
        emit('update:recruiterUserId', '')
    }
}
/** 部门名称点击 */
const shelfClick = async (item: any) => {
    if (item.deptId == props.recruiterDeptId) {
        emit('update:recruiterDeptId', '')
        emit('update:recruiterDeptIdName', '')
        emit('update:recruiterUserId', '')
        recruiterList.value = []
    } else {
        emit('update:recruiterDeptId', item.deptId)
        emit('update:recruiterDeptIdName', item.deptName)
        loading.value = true
        const res = await getUserList({ deptId: item.deptId })
        recruiterList.value = res.rows
        loading.value = false
        emit('update:recruiterUserId', '')
    }
}
/** 人员名称点击 */
const recruiterClick = (item: any) => {
    if (props.recruiterUserId == item.userId) {
        emit('update:recruiterUserId', '')
    } else {
        emit('update:recruiterUserId', item.userId)
        emit('update:recruiterDeptIdName', item.nickName)
    }
}
/** 上架时间点击事件 */
const datePicker = () => {
    pickerShow.value = true
}
/** 日期回显 */
const computPlace = (item: any, index: string | number) => {
    if (index == 0) {
        if (props.inStartTime) {
            return props.inStartTime
        } else {
            return item
        }
    } else if (index == 1) {
        if (props.inEndTime) {
            return props.inEndTime
        } else {
            return item
        }
    }
}
/** 有无出库记录点击 */
const stockClick = (item: any) => {
    if (props.outStockTag === item.id) {
        emit('update:outStockTag', '')
    } else {
        emit('update:outStockTag', item.id)
    }
}
// 处理日期格式
const formatDate = (date: any) => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
/** 日期选择 */
const onConfirm = (values: any) => {
    const [start, end] = values;
    pickerShow.value = false
    emit('update:inStartTime', formatDate(start))
    emit('update:inEndTime', formatDate(end))
}
defineExpose({ recruiterList })
</script>
<style lang="less" scoped>
@import url(../style/index.less);
</style>